<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Backbone.js Todos</title>
      <link rel="stylesheet" href="static/css/todos/todos.css"/>
    </head>
    <body>
        <div id="todoapp">
        
            <header>
                <h1>Todos</h1>
                <input id="new-todo" type="text" placeholder="What needs to be done?">
            </header>

            <section id="main">
                <input id="toggle-all" type="checkbox">
                <label for="toggle-all">MarK ALL As complete</label>
                <ul id="todo-list"></ul>
            </section>

            <footer>
              <a id="clear-completed">Clear completed</a>
              <div id="todo-count"></div>
            </footer>
            
        </div>
  
        <div id="instructions">
            Double-click to edit a todo.
        </div>
  
        <div id="credits">
            Created by gaochong
        </div>
        <script src="static/js/lib/??sea.js,plugin-combo.js"></script>
        <script src="static/js/lib/jquery-1.7.2.min.js"></script>
        <script src="static/js/lib/??underscore.js,backbone.js,backbone-localstorage.js"></script>
        <script>
            seajs.config({
                /**
                alias: {
                    'jquery': 'jquery-1.7.2.min.js',
                    'uds'   : 'underscore.js',
                    'bb'    : 'backbone.js',
                    'ls'    : 'backbone-localstorage.js'
                    // 'a'     : 'a.js'
                    // 'todos' : '/static/js/todos/todos'
                },
                */
                base: '/static/js/todos',
                debug: true
            }).use('todos');
        </script>
      <!-- Templates -->
      <script type="text/template" id="item-template">
        <div class="view">
          <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
          <label><%= title %></label>
          <a class="destroy"></a>
        </div>
        <input class="edit" type="text" value="<%= title %>" />
      </script>

      <script type="text/template" id="stats-template">
        <% if (done) { %>
          <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
        <% } %>
        <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
      </script>
  </body>
</html>
